<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1473987_p34tlh0h33f.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <script src="jquery-2.2.4.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script>
        $(document).ready(function () {
            $.post('https://api.apiopen.top/musicRankings?', function (data, status, xhr) {
                if(getCookie('username').length>=3){
                    alert('您已成功登录，点击确定返回首页')
                    window.location.href="index.html"
                }
            })
            // 登录按钮的点击事件
            $('#a').click(function () {
                // console.log(Cookies)
                //将用户密码存入cookie
                // setCookie('password', $('.denglu input[type=password]').val(),1);
                // console.log(getCookie('username'))
                // console.log(getCookie('password'))          
                if ($('.denglu input[type=user]').val() == '') {
                    alert('未填写用户名!')
                } else if ($('.denglu input[type=password]').val() == '') {
                    alert('未填写密码!')
                } else if (($('.denglu input[type=user]').val().length < 3 || $('.denglu input[type=user]').val().length >15) ||
                          $('.denglu input[type=password]').val().length > 9 
                ) {
                    alert('请按正确规则填写')
                } else if (($('.denglu input[type=user]').val().length >= 3 && $('.denglu input[type=user]').val().length <= 15) &
                          $('.denglu input[type=password]').val().length <= 9
                ){
                    $.post('https://api.apiopen.top/musicRankings?', function (data, status, xhr) {
                    //    console.log(data)
                       if(data.code==200){
                        alert('登录成功，点击确定后返回首页')
                        setCookie('username', $('.denglu input[type=user]').val(),1)
                        window.location.href="index.html"
                       }else{
                           alert('登录失败')
                       }
                    })
                }
            })

            //登录表单失去焦点事件
            $('.denglu input[type=user]').blur(function () {
                $(this).css('border-color', '')
                if ($(this).val() == '') {
                    $(this).css('border-color', 'red')
                    $(this).attr('placeholder', '未填写用户名!')
                } else if ($(this).val().length < 3) {
                    alert('用户名不得小于3个字符!')
                    $(this).css('border-color', 'red')
                } else if ($(this).val().length > 15) {
                    alert('用户名不得大于15个字符!')
                    $(this).css('border-color', 'red')
                }
            })
            $('.denglu input[type=password]').blur(function () {
                $(this).css('border-color', '')
                if ($(this).val() == '') {
                    $(this).css('border-color', 'red')
                    $(this).attr('placeholder', '未填写密码!')
                } else if ($(this).val().length > 9) {
                    alert('密码不得大于9个字符!')
                    $(this).css('border-color', 'red')
                }
            })
        })
    </script>
</head>

<body>

    <!-- header顶部导航 -->
    <div class="header">
        <div class="header-wrap">
            <div class="header-left">
                <div class="menu">
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="shoplist.html">商城</a></li>
                        <li><a href="">经验交流</a></li>
                        <li><a href="">联系我们</a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>

    <div class="middlebg">
        <div class="middle">
            <!-- 左边文字介绍 -->
            <ul class="zuo">
                <li>篮球，英文（basketball），起源于美国马萨诸塞州，</li>
                <span>是1891年12月21日由詹姆斯·奈史密斯创造，是奥运</span>
                <li>会核心比赛项目，是以手为中心的身体对抗性体育运动</li>
                <li>1891年12月21日，由美国马萨诸塞州斯普林菲尔德</li>
                <span>基督教青年会训练学校体育教师詹姆士·奈史密斯发明 。</span>
                <li>1896年，篮球运动传入中国，并且2002年姚明以状元</li>
                <span>的身份入选NBA，开启了中国篮球新的狂潮。</span>
            </ul>
            <!-- 中部跳转到注册页面的按钮 -->
            <a href="zhuce.html"><button class="chuang">创建一个用户</button></a>
            <!-- 登录表单 -->
            <form>
                <div class="denglu">
                    <span>登录</span>
                    <p>用户名:</p>
                    <input type="user" placeholder="请输入用户名">
                    </p>
                    <p>密码:</p>
                    <input type="password" placeholder="请输入密码">
                    <li>
                        <a href="">忘记密码？</a>
                        管理员:<input type="radio" name="denglu" value="admin" checked='checked'>
                        用户:<input type="radio" name="denglu" value="yonghu">
                    </li>
                    <a id="a" href="#"><button class="button" type="button">登录</button></a>
                </div>
            </form>
        </div>
    </div>

    <!-- 底部导航,套用index.html的模板 -->
    <div class="footer">
        <div class="footer-wrap">
            <div class="row">
                <div class="footer-ul">
                    <ul>
                        <h4>商品</h4>
                        <li><a href="#">篮球</a></li>
                        <li><a href="#">足球</a></li>
                        <li><a href="#">羽毛球</a></li>
                    </ul>
                </div>
                <div class="footer-ul">
                    <ul>
                        <h4>关于</h4>
                        <li><a href="#">价格</a></li>
                        <li><a href="#">质量</a></li>
                        <li><a href="#">保障
                            </a></li>
                    </ul>
                </div>
                <div class="footer-ul">
                    <ul>
                        <h4>客户支持</h4>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">订单跟踪</a></li>
                        <li><a href="#">保修</a></li>
                    </ul>
                </div>
                <div class="footer_bottom">
                    <div class="copy">
                        <p>版权 © 2014.公司保留所有权利.</p>
                    </div>
                </div>
            </div>
        </div>

    </div>

</body>

</html>